
const resize = (el) => {

    let parentNode = el.parentNode;

    // * 设计稿尺寸（px）
    const baseWidth = 1920;
    const baseHeight = 1080;

    // * 需保持的比例（默认1.77778）
    const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));


    let container = parentNode.getBoundingClientRect();
    // console.log('container',container);
    let style = window.getComputedStyle(parentNode).marginBottom;

    // const style = document.defaultView.getComputedStyle(parentNode);

    // console.log('style', style);

    // 当前宽高比
    const currentRate = parseFloat(
        (container.width / container.height).toFixed(5)
    );

    console.log('baseProportion, currentRate', baseProportion, currentRate);

    if (currentRate > baseProportion) {
        console.log('1111111');
        // 表示更宽
        el.style.width = container.height * baseProportion + 'px';
        el.style.height = container.height + 'px';

    } else {
        console.log('22222');
        console.log('container.width * 1200 / baseWidth',container.width * 1200 / baseWidth);
        // 1200 1980
        // 表示更高
        el.style.width = container.width  + 'px';
        el.style.height = container.width / baseProportion + 'px';
        // let height = 
    }

    // console.log('el.style',el,el.style);

    // if (screenRef.value) {
    //     if (currentRate > baseProportion) {
    //         // 表示更宽
    //         scale.width = (
    //             (window.innerHeight * baseProportion) /
    //             baseWidth
    //         ).toFixed(5);
    //         scale.height = (window.innerHeight / baseHeight).toFixed(5);
    //         screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
    //     } else {
    //         // 表示更高
    //         scale.height = (
    //             window.innerWidth /
    //             baseProportion /
    //             baseHeight
    //         ).toFixed(5);
    //         scale.width = (window.innerWidth / baseWidth).toFixed(5);
    //         screenRef.value.style.transform = `scale(${scale.width}, ${scale.height})`;
    //     }
    // }
}

export default {
    mounted(el, binding, vnode) {
        window.addEventListener("resize", () => {
            return resize(el)
        });
        resize(el);
        console.log('mounted aspectRatio', el, el.parentNode);
    },
    // 绑定元素的父组件卸载后调用
    unmounted(el, binding, vnode) {
        window.removeEventListener("resize", () => {
            return resize(el)
        });
        console.log('unmounted aspectRatio');
    }
}